<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 
			 * 
			 * 
			 *  transform:变形
			 * 	transition:过渡
			 * 	transition-property 针对属性变化 增加过渡效果
			 *  transition-duration: 过渡的时长
			 * */
			.test1{
				width: 100px;
				height: 100px;
				background: orange;
				border: 4px solid green;
				-webkit-transition: background-color;
				-webkit-transition-duration: 1s;
				-webkit-transition: transform;	
				transition-duration: 1s;
				transition-delay: 200ms;
				transition-timing-function: ease-in-out;
				transition: all linear 3s,400ms;
				transform-style: flat;
				transform-origin: right bottom;
			}
			
			.test2{
				width: 50px;
				height: 50px;
				background: deeppink;
				transition: all 2s;
				backface-visibility: visible;
				transform-style: preserve-3d;
			}
			
			.test2:hover{
				transform: rotateX(180deg);
			}
			
			.test1:hover{
				/*transform: scale(3) rotateX(180deg) translateX(1000px);
				transform: rotateX(90deg);*/
				/*transform: scale(3);*/	
				/*background: deepskyblue;
				border: 4px solid yellow;	*/
				/*
				 	translate 平移
					 	translateX 水平方向平移， 值为正的时候向右平移，负数则向左
					 	translateY 垂直方向平移， 值为正的时候向下平移， 负数向右

					scale 缩放(一个值的话宽高同时缩放，两个值的话宽高分别缩放设置的比例)
						scaleX,scaleY
					
					rotate 旋转 摆好手势 手指的方向为正
						rotateX 绕X轴旋转(打开电脑盖的方向)
						rotateY 绕Y轴旋转(右手方向翻书的效果)
						rotateZ 绕Z轴旋转(普通的平面旋转)
				
					skew倾斜	
						skewX 水平方向到中心点的夹角，值为正的时候逆时针向旋转
						
				 */	
				 
			}
		</style>
	</head>
	<body>
		<div class="test1">
			<div class="test2">
				bgg
			</div>
		</div>
	</body>
</html>
